<template>
  <a-button v-if="dispatching" class="map-dispatcher-close-btn" @click="closeRange">结束调度</a-button>
</template>

<script>
import debounce from 'lodash-es/debounce.js';
import { MapInfoWindow } from '../../../components/gis-map/info-window/index.js';
import icon from '../assets/map_bt_ziyuan.png';

export default {
  name: 'map-dispatcher',
  props: {
    modelValue: { type: Object, default: undefined },
  },
  data() {
    return {
      radius: 0,
      dispatching: false,
    };
  },
  created() {
    this.map = this.$attrs.map;
    this.AMap = this.$attrs.AMap;
    this.map.on('rightclick', this.openInfoWindow, this);
  },
  unmounted() {
    this.map.off('rightclick', this.openInfoWindow, this);
  },
  beforeDestroy() {
    this.map.off('rightclick', this.openInfoWindow, this);
  },
  methods: {
    loadCircleEditorPlugin() {
      if (AMap.CircleEditor) {
        return Promise.resolve();
      }
      return new Promise((resolve) => {
        if (this.AMap) {
          this.AMap.plugin(['AMap.CircleEditor'], () => resolve());
        } else {
          AMap.plugin(['AMap.CircleEditor'], () => resolve());
        }
      });
    },
    openInfoWindow(e) {
      this.center = e.lnglat;
      this.createInfoWindow();
      this.infoWindow.open({ position: this.center });
    },
    createInfoWindow() {
      if (!this.infoWindow) {
        this.infoWindow = new MapInfoWindow({ AMap: this.AMap, map: this.map });
      }
      this.infoWindow.getContent = () => {
        const div = document.createElement('div');
        div.onclick = () => {
          this.infoWindow.close();
          this.createRange();
        };
        div.innerText = '开始调度';
        div.style.width = '240px';
        div.style.height = '50px';
        div.style.lineHeight = '50px';
        div.style.textAlign = 'center';
        div.style.cursor = 'pointer';
        div.style.color = '#ffffff';
        return div;
      };
    },
    createMarker() {
      if (!this.marker) {
        const configData = {
          content: `<img src="${icon}" style="width: 38px;height: 56px;" />`,
          offset: this.AMap ? new this.AMap.Pixel(-19, -56) : new AMap.Pixel(-19, -56),
          animation: 'AMAP_ANIMATION_DROP',
          draggable: true,
        };
        this.marker = this.AMap ? new this.AMap.Marker(configData) : new AMap.Marker(configData);
        this.marker.on('dragging', () => {
          this.center = this.marker.getPosition();
          if (this.circle) {
            this.circle.setCenter(this.center);
          }
          this.output();
        });
      }
      this.marker.setPosition(this.center);
      this.map.add(this.marker);
      // this.marker.setMap(this.map);
    },
    async createRange() {
      await this.createCircle();
      this.createMarker();
      this.dispatching = true;
      this.watchRadiusCanceler = this.$watch(
        () => this.modelValue,
        (data) => {
          if (data && data.radius) {
            this.radius = data.radius;
            this.circle.setRadius(this.radius);
            this.map.setFitView(this.circle);
          }
        },
        { immediate: true }
      );
    },
    async createCircle() {
      if (!this.circle) {
        const configData = {
          strokeColor: '#F33',
          strokeOpacity: 1,
          strokeWeight: 3,
          fillColor: '#e20',
          fillOpacity: 0.1,
        };
        this.circle = this.AMap ? new this.AMap.Circle(configData) : new AMap.Circle(configData);
      }
      if (!this.circleEditor) {
        await this.loadCircleEditorPlugin();
        this.circleEditor = this.AMap
          ? new this.AMap.CircleEditor(this.map, this.circle)
          : new AMap.CircleEditor(this.map, this.circle);
        this.circleEditor.on('move', () => {
          this.center = this.circle.getCenter();
          if (this.marker) {
            this.marker.setPosition(this.center);
          }
          this.output();
        });
        this.circleEditor.on('adjust', ({ radius }) => {
          this.radius = radius;
          this.output();
        });
      }
      this.circle.setCenter(this.center);
      this.circle.setMap(this.map);
      this.circleEditor.open();
    },
    closeRange() {
      if (typeof this.watchRadiusCanceler === 'function') {
        this.watchRadiusCanceler();
        this.watchRadiusCanceler = null;
      }
      if (this.circleEditor) {
        this.circleEditor.close();
      }
      this.circle.setMap(null);
      this.marker.setMap(null);
      this.dispatching = false;
      this.center = null;
      this.output();
    },
    output: debounce(function () {
      const data = { center: this.center, radius: this.radius };
      this.$emit('update:modelValue', data);
      this.$emit('change', data);
    }, 1000),
  },
};
</script>

<style scoped lang="less">
.map-dispatcher-close-btn {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
}
</style>
